<template>
	<div>
		<div class="home" ref='element'>
			<!-- 预定的搜索框 -->

			<div><input type="search" placeholder="咖啡"> 搜索</div>
			<!-- 区域智能导航 -->
			<div class="Area">
				<span @click="Show" :class="vShow?'Showclass':''">区域</span>|
				<span @click="ShowMap" :class="Showmap?'Showclass':''">智能排序</span>
				<!-- 区域和智能导航  展示的区域 -->
				<div v-show="vShow" class="Area_map">
					
					<ul>
						<!-- 城区 -->
						<li v-for="item in map" >{{item}}</li>
						
					</ul>
					<div v-show="ShowDiv">
						<ul>
							<li>附近</li>
							<li>500米</li>
							<li>1000米</li>
						</ul>
					</div>


				</div>
				<div v-show="Showmap" class="Area_rank">
					<ul>
						<li v-for="item in rank">{{item}}</li>
					</ul>
				</div>
			</div>
			<!-- 列表 -->
			<div class="menu">
				<mt-loadmore :top-method="loadTop" :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" ref="loadmore">
				
				<ul>
					<li v-for="item in imgList" @click="dianc">
						<img src="../../img/yuding02.png" alt="">
						<div>
							<span>悠时咖啡</span>
							<span>
								<img src="../../img/yudingstar.png" alt="">
								<img src="../../img/yudingstar.png" alt="">
								<img src="../../img/yudingstar.png" alt="">
								<img src="../../img/yudingstar.png" alt="">
								<img src="../../img/yudingstar.png" alt="">
								<strong>￥53/人</strong>
							</span>
							<span>
								<div>三元桥时间国际8号楼</div>
								<div>350m</div>
							</span>

						</div>
					</li>
					<div style="height: 40px;"></div>
				</ul>
				</mt-loadmore>

			</div>
			<navbar></navbar>



		</div>
	</div>
</template>

<script>
	//上拉下拉
	import { Loadmore } from 'mint-ui';
	//节流插件
	import _ from 'lodash'
	import {
		throttle
	} from 'throttle-debounce';
	import navbar from '../../navbar.vue'

	export default {
		name: 'yuding',
		components: {
			navbar
		},
		data() {
			return {
				rank:['智能优先','距离优先','人气优先','好评优先','口味最佳','环境最佳','服务最佳','低价优先','高价优先'],
				allLoaded:false,
				ShowDiv:true,
				scroll: '',
				selected: '',
				vShow: false,
				Showmap: false,
				map:['附近','西城','东城','海淀','丰台','朝阳','昌平','宣武','通州'],
				imgList: ['../../img/yuding02.png', '1', '1', '1', '1', '1', '1', '1', '1', '1', '1']
			}
		},
		//只有完成挂载才能获取到dom元素，才可以使用ref
		mounted() {
			window.addEventListener('scroll', this.handleScroll)
			// window.onscroll = function(){
			// this.scroll = document.documentElement.scrollTop;
			// console.log(this.scroll)
		},


			// this.change()
			// this.handleScroll()
			// console.log(document.documentElement.scrollTop)
			// console.log(this.$refs.element.offsetTop)
			//第一种方法
		
		activated() {
			//第一种方法
			if (this.scroll > 0) {
				window.scrollTo(0, this.scroll)
				this.scroll = 0;
				window.addEventListener('scroll', this.handleScroll);
			}
			//第二种

		},
		//页面销毁时销毁销毁缓存
		deactivated() {
			//第一种方法
			// this.$destroy()
			//绑定方法后必须要将方法在组件销毁时解绑
			window.removeEventListener('scroll', this.handleScroll);
		},

		methods: {
			loadTop() {
			  // 加载更多数据 写交互
			  this.$refs.loadmore.onTopLoaded();
			},
			loadBottom() {
			  // 加载更多数据  写交互
			  this.allLoaded = true;// 若数据已全部获取完毕
			  this.$refs.loadmore.onBottomLoaded();
			},
			//附近地址信息
			fujin(){
				this.ShowDiv = !this.ShowDiv
			},
			//第二种方法
			// change() {
			// 	this.scroll = document.documentElement.scrollTop

			// 	console.log(this.scroll)
			// },
			// 	},
			//节流方法
			handleScroll:
					
				//    // console.log(throttle);
				// _.throttle(500, false, () => {
				//    this.scroll  = document.documentElement.scrollTop
				   				
				//    console.log(1)
				// })
				_.throttle(function(){
				     this.scroll  = document.documentElement.scrollTop
				      console.log(this.scroll)
				    },1000)
				
			 ,

			// handleScroll() {
			// 	this.scroll = document.documentElement.scrollTop

			// 	console.log(this.scroll)

			// },

			Show() {
				this.vShow = !this.vShow
				this.Showmap = false
			},
			ShowMap() {
				this.Showmap = !this.Showmap
				this.vShow = false
			},
			dianc() {
				this.$router.push('/diancan')
			}

		}
	}
</script>
<style lang="less" scoped>
	.home {
		width: 100%;
	}

	// navbar{
	// 	position: fixed;
	// 	bottom: 0;
	// }
	.menu {
	overflow: scroll;
		ul {
			margin: 0;
			padding: 0;

			li {
				padding: 10px 10px;
				box-sizing: border-box;
				width: 100%;
				height: 101px;
				line-height: 20px;
				border-top: 1px solid lightgray;
				display: flex;
				justify-content: flex-start;

				// align-items: center;
				div {
					text-align: left;
					width: 80%;
					margin-left: 10px;
					display: inline-block;

					span {
						// text-align: center;
						display: block;
					}

					span:nth-child(2) {
						font-size: 13px;
						img {
							margin-right: 2px;
						}
					}

					span:nth-child(1) {
						font-size: 13px;
					}

					span:nth-child(3) {

						text-align: left;
						font-size: 10px;
						display: flex;
						justify-content: space-between;
					}

				}

			}
		}
	}

	.Showclass {
		color: orange;
	}

	.Area {
		position: relative;

		.Area_map ,.Area_rank{
			font-size: 14px;
			display: flex;
			position: absolute;
			top: 30px;
			left: 0;
			width: 100%;
			z-index: 9999;
			background-color: white;
			ul{
				flex: 3;
			}
			div{
				flex: 7;
				text-align: left;
				
			}
			
		}

		width: 100%;
		height: 31px;
		line-height: 20px;
		text-align: center;

		span {
			display: inline-block;
			width: 45%;
			height: 100%;
			text-align: center;
			line-height: 31px;
			// display: false;
		}
	}


	input[type="search"] {
		margin-top: 10px;
		left: 13px;
		top: 26px;
		width: 80%;
		height: 24px;
		line-height: 20px;
		border-radius: 21px;
		color: rgba(16, 16, 16, 50);
		font-size: 14px;
		text-align: left;
		font-family: Arial;
		border: 1px solid rgba(187, 187, 187, 100);
		font-size: 14px;
		text-align: left;
		font-family: PingFangSC-regular;
		background: url(../../img/mb-search%20Copy@1x.png) no-repeat 10px;
		background-color: rgba(222, 240, 253, 46);
		padding-left: 25px;
		box-sizing: border-box;
	}
</style>
